<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" inline label-width="68px">
      <el-form-item label="机构名称" prop="institutionId">
        <el-select
          v-model="queryParams.institutionId"
          placeholder="请选择机构名称"
          filterable
          clearable
          @change="getStoreList('storeList', 'queryParams')"
        >
          <el-option
            v-for="item in institutionList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="门店名称" prop="storeId">
        <el-select
          v-model="queryParams.storeId"
          placeholder="请选择门店名称"
          filterable
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="item in storeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择订单状态"
          filterable
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单来源" prop="source">
        <el-select
          v-model="queryParams.source"
          placeholder="请选择订单来源"
          filterable
          clearable
          @change="handleQuery"
        >
          <el-option
            v-for="item in sourceList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="关键字" prop="keyword">
        <el-input
          v-model="queryParams.keyword"
          placeholder="取药码/药品名称/商品条码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="序号" type="index" width="80" align="center" />
      <el-table-column label="机构名称" align="center" prop="institutionName" />
      <el-table-column label="门店名称" align="center" prop="storeName" />
      <el-table-column label="取药码" align="center" prop="medicationCode" />
      <el-table-column label="金额" align="center" prop="amount" />
      <el-table-column label="品种数量" align="center" prop="varietiesNumber" />
      <el-table-column label="出货情况" align="center">
        <template slot-scope="scope">
          {{ scope.row.totalShipmentQuantity || 0 }}/{{
            scope.row.totalOrderQuantity || 0
          }}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          {{ getStatusName(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="下单时间" align="center" prop="orderTime" width="180" />
      <el-table-column label="订单来源" align="center">
        <template slot-scope="scope">
          {{ getSources(scope.row.source) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status === 1"
            v-hasPermi="['mc:order:edit']"
            type="text"
            size="mini"
            icon="el-icon-scissors"
            @click="handleRevoke(scope.row)"
          >
            撤销
          </el-button>
          <el-button
            type="text"
            size="mini"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          >
            查看详情
          </el-button>
          <el-button
            v-if="scope.row.status === 1"
            v-hasPermi="['mc:order:takeOut']"
            type="text"
            size="mini"
            icon="el-icon-printer"
            @click="handleTakeOut(scope.row)"
          >
            取药
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <Order-dialog v-model="detailShow" :order-id="detailId" />
  </div>
</template>

<script>
import { listOrder, takeOut, revokeOrder } from "@/api/mc/order";
import { listInstitution } from "@/api/mc/institution";
import { listStore } from "@/api/mc/store";
import OrderDialog from "./components/OrderDialog";

export default {
  name: "Order",
  components: { OrderDialog },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 订单信息表格数据
      dataList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        institutionId: null,
        status: null,
        source: null,
        storeId: null,
        keyword: null,
      },
      institutionList: [], // 机构列表
      storeList: [], // 门店列表
      statusList: [
        { label: "已下单", value: 1 },
        { label: "已完成", value: 2 },
        { label: "已出错", value: 3 },
        { label: "已取消", value: 4 },
        { label: "正在取药", value: 5 },
      ],
      sourceList: [
        { label: "系统", value: "system" },
        { label: "APP", value: "app" },
        { label: "美团", value: 1 },
        { label: "饿了么", value: 2 },
        { label: "京东", value: 3 },
      ],
      detailShow: false, // 详情弹窗
      detailId: "", // 详情信息ID
    };
  },
  created() {
    this.getInstitutionList();
    this.getList();
  },
  methods: {
    /** 查询订单信息列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams)
        .then((res) => {
          this.dataList = res.rows;
          this.total = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 获取机构列表
    getInstitutionList() {
      listInstitution({ pageNum: 1, pageSize: 1000 }).then((res) => {
        this.institutionList = res.rows;
      });
    },
    // 获取门店列表
    getStoreList(field, form = "queryParams") {
      this[form].storeId = null;
      this[form].cabinetId = null;
      if (form == "queryParams") {
        this.handleQuery();
      } else {
        this[form].subOrderList = [];
      }
      listStore({
        pageNum: 1,
        pageSize: 1000,
        institutionId: this[form].institutionId,
      }).then((res) => {
        this[field] = res.rows;
      });
    },
    // 获取状态名称
    getStatusName(val) {
      let row = this.statusList.find((i) => i.value == val);
      return row ? row.label : "";
    },
    // 获取来源名称
    getSources(val) {
      let row = this.sourceList.find((i) => i.value == val);
      return row ? row.label : "";
    },
    // 查看详情
    handleView(row) {
      this.detailId = row.id;
      this.detailShow = true;
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 撤销订单
    handleRevoke(row) {
      this.$prompt(`请填入撤销原因`, "撤销订单", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        closeOnClickModal: false,
      })
        .then(({ value }) => {
          this.$modal
            .confirm("确定要撤销订单吗？")
            .then(() => {
              revokeOrder({
                id: row.id,
                cancelReason: value,
              }).then(() => {
                this.getList();
                this.$modal.msgSuccess("撤销成功");
              });
            })
            .catch(() => {});
        })
        .catch(() => {});
    },
    // 取药
    handleTakeOut(row) {
      this.$modal
        .confirm(`确认取药吗？`)
        .then(() => {
          takeOut(row.id).then(() => {
            this.getList();
            this.$modal.msgSuccess("取药成功");
          });
        })
        .catch(() => {});
    },
  },
};
</script>
